<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .aside {
            position: fixed;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .item {
            height: 40px;
            line-height: 40px;
            text-align: center;
            padding: 0 10px;
            cursor: pointer;
        }

        .active {
            background-color: red;
            color: #fff;
        }

        .content {
            width: 660px;
            margin: 400px auto;
        }

        .neirong {
            height: 300px;
            margin-bottom: 20px;
            color: #fff;
        }

        .content1 {
            background-color: red;
        }

        .content2 {
            background-color: blue;
        }

        .content3 {
            background-color: orange;
        }

        .content4 {
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="aside">
        <div data-msg='content1' class="item active">男装/女装</div>
        <div data-msg='content2' class="item">儿童服装/游乐园</div>
        <div data-msg='content3' class="item">电子产品</div>
        <div data-msg='content4' class="item">电影/美食</div>
    </div>

    <div class="content">
        <div id='content1' class="neirong content1">男装/女装</div>
        <div id='content2' class="neirong content2">儿童服装/游乐园</div>
        <div id='content3' class="neirong content3">电子产品</div>
        <div id='content4' class="neirong content4">电影/美食</div>
    </div>
    <script>
        // 1.点击秒杀侧边导航 --> 对应的盒子(通过自定义属性)
        // 2.获取当前盒子相对页面的位置 --> 元素.offsetTop
        // 3.将获取到的位置赋值给滚动条

        let items = document.querySelectorAll('.aside .item')
        for (let i = 0; i < items.length; i++) {
            // 功能 1. 电梯导航样式
            items[i].addEventListener('click', function () {
                for (let j = 0; j < items.length; j++) {
                    items[j].className='item'
                }
                this.classList.add('item', 'active')

                // 功能2:点击获取对应盒子-自定义属性
                let id = this.getAttribute('data-msg')
                // 根据id获取盒子对应的位置
                let lg = document.getElementById(id).offsetTop;
                // 将位置设置给滚动条
                document.documentElement.scrollTop = lg
            })
        }
    </script>
</body>

</html>
